<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情 - 甜品店堂食点餐系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://unpkg.com/tdesign-mobile-vue/dist/tdesign.min.css" />
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: #f0f2f5;
            height: 100vh;
            margin: 0;
            padding: 0;
        }
        .ticket-number {
            font-size: 3rem;
            font-weight: 700;
            color: #FF4081;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            letter-spacing: 2px;
        }
    </style>
</head>
<body>
    <div class="flex flex-col h-full">
        <!-- 顶部导航栏 -->
        <div class="bg-white px-4 py-3 flex items-center shadow-sm">
            <a href="orders.html" class="mr-2">
                <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
            </a>
            <h1 class="text-lg font-medium">订单详情</h1>
        </div>

        <!-- 订单详情内容 -->
        <div class="flex-1 overflow-y-auto p-4 space-y-4">
            <!-- 订单状态 -->
            <div class="bg-gradient-to-r from-pink-500 to-purple-500 text-white rounded-xl p-4 text-center">
                <div class="flex items-center justify-center mb-2">
                    <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span class="text-lg font-bold">已支付</span>
                </div>
                <p class="text-white text-opacity-80 text-sm">订单已提交至后厨，请耐心等待</p>
                
                <div class="bg-white bg-opacity-20 rounded-lg p-3 mt-3 flex justify-between items-center">
                    <div>
                        <p class="text-sm">取单号</p>
                        <div class="ticket-number">038</div>
                    </div>
                    <div class="text-right">
                        <p class="text-sm">预计等待</p>
                        <p class="text-xl font-bold">15分钟</p>
                    </div>
                </div>
            </div>

            <!-- 订单信息 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden p-4">
                <h3 class="font-medium text-gray-800 mb-3">订单信息</h3>
                
                <div class="space-y-2 text-sm">
                    <div class="flex">
                        <span class="text-gray-500 w-20">订单号</span>
                        <span class="text-gray-800 flex-1">20230806A5X9P2</span>
                    </div>
                    <div class="flex">
                        <span class="text-gray-500 w-20">桌号</span>
                        <span class="text-gray-800 flex-1">A03</span>
                    </div>
                    <div class="flex">
                        <span class="text-gray-500 w-20">下单时间</span>
                        <span class="text-gray-800 flex-1">2023-08-06 14:30</span>
                    </div>
                    <div class="flex">
                        <span class="text-gray-500 w-20">支付方式</span>
                        <span class="text-gray-800 flex-1">微信支付</span>
                    </div>
                    <div class="flex">
                        <span class="text-gray-500 w-20">支付时间</span>
                        <span class="text-gray-800 flex-1">2023-08-06 14:32</span>
                    </div>
                </div>
            </div>

            <!-- 商品列表 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden p-4">
                <h3 class="font-medium text-gray-800 mb-3">商品列表</h3>
                
                <!-- 商品项目 1 -->
                <div class="flex items-center justify-between py-2 border-b border-gray-100">
                    <div class="flex items-center">
                        <div class="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1587314168485-3236d6710814?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="提拉米苏" class="w-full h-full object-cover">
                        </div>
                        <div class="ml-3">
                            <h4 class="font-medium text-gray-800">经典提拉米苏</h4>
                            <p class="text-xs text-gray-500 mt-1">意大利经典甜点，层次丰富</p>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-gray-800 font-medium">¥42.00</div>
                        <div class="text-gray-500 text-sm">×1</div>
                    </div>
                </div>
                
                <!-- 商品项目 2 -->
                <div class="flex items-center justify-between py-2">
                    <div class="flex items-center">
                        <div class="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1501443762994-82bd5dace89a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="芒果冰沙" class="w-full h-full object-cover">
                        </div>
                        <div class="ml-3">
                            <h4 class="font-medium text-gray-800">芒果冰沙</h4>
                            <p class="text-xs text-gray-500 mt-1">新鲜芒果打制，清爽解暑</p>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-gray-800 font-medium">¥28.00</div>
                        <div class="text-gray-500 text-sm">×2</div>
                    </div>
                </div>
            </div>

            <!-- 备注信息 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden p-4">
                <div class="flex items-center mb-2">
                    <svg class="w-5 h-5 text-pink-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                    </svg>
                    <span class="text-gray-800 font-medium">备注</span>
                </div>
                <div class="bg-gray-50 rounded-lg p-3 text-gray-600">
                    提拉米苏多加可可粉
                </div>
            </div>

            <!-- 价格明细 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden p-4">
                <h3 class="font-medium text-gray-800 mb-3">价格明细</h3>
                
                <div class="space-y-2">
                    <div class="flex items-center justify-between">
                        <span class="text-gray-600">商品金额</span>
                        <span class="text-gray-800">¥98.00</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-gray-600">优惠金额</span>
                        <span class="text-green-600">-¥0.00</span>
                    </div>
                </div>
                
                <div class="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between">
                    <span class="text-gray-800 font-medium">实付金额</span>
                    <span class="text-pink-600 font-bold text-xl">¥98.00</span>
                </div>
            </div>

            <!-- 小票模板 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden p-4">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-medium text-gray-800">电子小票</h3>
                    <button class="text-pink-500 text-sm font-medium flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                        </svg>
                        保存
                    </button>
                </div>
                
                <div class="bg-gray-50 rounded-lg p-4 font-mono text-sm">
                    <div class="text-center mb-2">
                        <div class="font-bold">🍰 甜蜜时光甜品站 🍦</div>
                        <div>====================</div>
                    </div>
                    <div class="mb-2">
                        <div>取单号：[ 038 ] ← 请关注</div>
                        <div>订单号：20230806A5X9P2</div>
                        <div>桌号：A03 · 时间：14:30</div>
                        <div>--------------------</div>
                    </div>
                    <div class="mb-2">
                        <div>1. 经典提拉米苏    ¥42.00</div>
                        <div>   备注：多加可可粉</div>
                        <div>2. 芒果冰沙(大)    ¥28.00 × 2</div>
                        <div>--------------------</div>
                    </div>
                    <div>
                        <div>合计：¥98.00</div>
                        <div>预计等待：15分钟</div>
                        <div>====================</div>
                        <div class="text-center">扫码关注获取会员优惠</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部按钮 -->
        <div class="bg-white border-t border-gray-200 p-4 flex space-x-4">
            <button class="block w-1/2 border border-gray-300 text-gray-600 py-3 rounded-full font-medium text-center">
                联系客服
            </button>
            <button class="block w-1/2 bg-gradient-to-r from-pink-500 to-purple-500 text-white py-3 rounded-full font-medium text-center shadow-md">
                再来一单
            </button>
        </div>
    </div>
</body>
</html>